import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:fate_blind_box/widget/appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class AccountsPage extends GetView<AccountsLogic> {
  const AccountsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const HzAppBar(
        text: '转账',
      ),
      backgroundColor: Colors.white,
      body: SafeArea(
        bottom: true,
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(left: 14.w, right: 14.w, top: 22.w),
              child: Row(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(5),
                    child: Image.network(
                      controller.state.avatarUrl.value,
                      width: 30,
                      height: 30,
                      fit: BoxFit.cover,
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Text(
                      '转账给${controller.state.nickName.value}',
                      style: const TextStyle(
                        color: Color(0xff0F1724),
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              margin: EdgeInsets.only(left: 14.w, right: 14.w),
              height: 45,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: const Color(0xFFF6F8FA),
              ),
              child: TextField(
                controller: controller.state.transferMoneyController,
                maxLength: 11,
                keyboardType: TextInputType.phone,
                cursorColor: const Color(0xFFFB6D99),
                style: const TextStyle(fontSize: 12, color: Color(0xFF222222)),
                decoration: InputDecoration(
                  hintText: "转账金额",
                  counterText: "",
                  border: InputBorder.none,
                  hintStyle: const TextStyle(color: Color(0xFF999999)),
                  fillColor: const Color(0xffF6F8FA),
                  filled: true,
                  enabledBorder: const OutlineInputBorder(
                    /*边角*/
                    borderRadius: BorderRadius.all(
                      Radius.circular(5), //边角为30
                    ),
                    borderSide: BorderSide(
                      color: Colors.white54, //边线颜色为黄色
                      width: 1, //边线宽度为2
                    ),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5),
                    borderSide: const BorderSide(
                      color: Colors.white54, //边框颜色为绿色
                      width: 1, //宽度为5
                    ),
                  ),
                  contentPadding:
                      const EdgeInsets.only(top: 0, bottom: 0, left: 10),
                ),
                onChanged: (e) {},
              ),
            ),
            const Spacer(),
            InkWell(
              onTap: () => controller.transferMoney(),
              child: Container(
                margin: EdgeInsets.only(bottom: 44.w, left: 14.w, right: 14.w),
                height: 48.w,
                width: double.infinity,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22),
                    color: ThemeColor.appColor),
                child: const Text(
                  '确认转账',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
